<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <title>携程在手，说走就走</title>
</head>

<body>
    <!-- 顶部固定搜索框 start -->
    <header class="top_fixed_search">
        <div class="search_box">
            <button>搜索</button>
            <input type="text" name="" id="" placeholder="目的地/酒店/景点/航班号">
        </div>

        <p></p>
        <h5><a href="javascropt:;">我 的</a></h5>
    </header>
    <!-- 顶部固定搜索框 end -->

    <!-- 焦点图 start -->
    <div class="focus">
        <img src="uploads/focus.jpg" alt="">
    </div>
    <!-- 焦点图 end-->

    <!-- 头部导航栏 模块 start -->
    <ul class="nav_items">
        <li>
            <div class="item_icon item_icon_1"></div>
            <h5><a href="javascript:;">景点 玩乐</a></h5>
        </li>
        <li>
            <div class="item_icon item_icon_2"></div>
            <h5><a href="javascript:;">景点 玩乐</a></h5>

        </li>
        <li>
            <div class="item_icon item_icon_3"></div>
            <h5><a href="javascript:;">景点 玩乐</a></h5>

        </li>
        <li>
            <div class="item_icon item_icon_4"></div>
            <h5><a href="javascript:;">景点 玩乐</a></h5>

        </li>
        <li>
            <div class="item_icon item_icon_5"></div>
            <h5><a href="javascript:;">景点 玩乐</a></h5>

        </li>
    </ul>
    <!-- 头部导航栏 模块 end -->

    <!-- 商品导航栏 start -->
    <ul class="nav_menu">
        <li class="nav_menu_1">
            <div class="col col_one">
                <a href="javascript:;">海外酒店</a>
            </div>
            <div class="col">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
            </div>
            <div class="col">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
            </div>
        </li>
        <li class="nav_menu_2">
            <div class="col col_one">
                <a href="javascript:;">海外酒店</a>
            </div>
            <div class="col">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
            </div>
            <div class="col">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
            </div>
        </li>
        <li class="nav_menu_3">
            <div class="col col_one">
                <a href="javascript:;">海外酒店</a>

            </div>
            <div class="col">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
            </div>
            <div class="col">
                <a href="javascript:;">海外酒店</a>
                <a href="javascript:;">海外酒店</a>
            </div>
        </li>
    </ul>
    <!-- 商品导航栏 end -->

    <!-- 缴费导航栏 start -->
    <ul class="fee_menu">
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
        <li class="fee_item">
            <a href="#">
                <span class="subnav-entry-icon"></span>
                <span>电话费</span>
            </a>
        </li>
    </ul>

    <!-- js 更改类subnav-entry-icon图片坐标 -->
    <script>
        let icons = document.querySelectorAll('.fee_menu .subnav-entry-icon');
        for (let i = 0; i < icons.length; i++) {
            icons[i].style.backgroundPositionY = -i * 28 + 'px';
        }
    </script>

    <!-- 缴费导航栏 end -->

    <!-- 底部导航栏 start -->
    <div class="sales-box">
        <div class="sales-hd">
            <div class="hot"></div>
            <a href="#" class="more">获取更多福利</a>
        </div>
        <div class="sales-bd">
            <div class="row">
                <a href="#">
                    <img src="uploads/pic1.jpg" alt="">
                </a>
                <a href="#">
                    <img src="uploads/pic2.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="uploads/pic3.jpg" alt="">
                </a>
                <a href="#">
                    <img src="uploads/pic4.jpg" alt="">
                </a>
            </div>
            <div class="row">
                <a href="#">
                    <img src="uploads/pic5.jpg" alt="">
                </a>
                <a href="#">
                    <img src="uploads/pic6.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
    <!-- 底部导航栏 end -->
</body>

</html>